import React, { Component } from 'react';
import styles from "./OrderDetailPage.module.scss";
import { NavBar } from "antd-mobile";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import Lazy from "../../utils/imgLazyLoad";

class OrderDetailPage extends Component {
    render() {
        return (
            <div className={styles.orderPage}>
                <NavBar
                    mode="dark"
                    leftContent={
                        <svg className="icon" aria-hidden="true">
                            <use href="#icon-zuojiantou-copy2-copy"></use>
                        </svg>
                    }
                    rightContent={
                        <span>
                            <svg className="icon" aria-hidden="true">
                                <use href="#icon-kefu-copy"></use>
                            </svg>
                        </span>
                    }
                >{"订单"+this.props.status}</NavBar>
                <div className={`${styles.afterSale} ${styles.boxCommonCss}`}>
                    <h2>感谢您对吃了么的信任，期待再次光临</h2>
                    <div className={styles.afterSaleServe}>
                        <div>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use href="#icon-shouhou"></use>
                                </svg>
                            </span>
                            <p>申请售后</p>
                        </div>
                        <div onClick={
                            ()=>{
                                this.props.history.push('/chat')
                            }
                        }>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use href="#icon-lianxi"></use>
                                </svg>
                            </span>
                            <p>在线联系</p>
                            <em>1</em>
                        </div>
                        <div>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use href="#icon-dashang"></use>
                                </svg>
                            </span>
                            <p>打赏骑士</p>
                        </div>
                        <div>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use href="#icon-xingxing"></use>
                                </svg>
                            </span>
                            <p>评价得金币</p>
                        </div>
                    </div>
                </div>
                <div className={`${styles.claimPath} ${styles.boxCommonCss}`}>
                    <h2>食无忧理赔申请</h2>
                    <p>如果发现食品变质、存在易物或引发就医，均可申请理赔</p>
                    <em>
                        <svg className="icon" aria-hidden="true">
                            <use href="#icon-you-copy"></use>
                        </svg>                   
                    </em>
                </div>
                <div className={`${styles.orderList} ${styles.boxCommonCss}`}>
                    <div className={styles.shopTitle}>
                        <h2>
                            {this.props.shopName}
                            <span>
                                <svg className="icon" aria-hidden="true">
                                <use href="#icon-you-copy"></use>
                                </svg>   
                            </span>
                        </h2>
                        <div>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                <use href="#icon-jia"></use>
                                </svg>   
                            </span>
                            <span>再来一单</span>
                        </div>
                    </div>
                    <div className={styles.orderGoods}>
                        {this.props.goods.map(v=>{
                            return <dl className={styles.orderGoodsItem} key={v.id}>
                                <dt>
                                    <Lazy className='pic' src={v.imgUrl} alt={v.name}></Lazy>
                                </dt>
                                <dd>
                                    <h3>{v.name}</h3>
                                    <p>{v.specification}</p>
                                    <span>×{v.num}</span>
                                    <em>￥{v.price*v.num}</em>
                                </dd>
                            </dl>
                        })}
                    </div>
                    <div className={styles.otherInfo}>
                        <div>
                            <h3>包装费</h3>
                            <em>{"￥"+this.props.packExpense}</em>
                        </div>
                        <div>
                            <h3>配送费</h3>
                            <em>{"￥"+this.props.deliveryCost}</em>
                        </div>
                        <div className={styles.orderDiscount}>
                            <h3><span>减</span>店铺满减</h3>
                            <em>{"-￥"+this.props.discounts}</em>
                        </div>
                        <div className={styles.orderTotal}>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use href="#icon-Telephone"></use>
                                </svg>  
                                联系商家
                            </span>
                            <div>
                                <p>已优惠<span>{'￥'+this.props.discounts}</span></p>
                                <p>实付￥<span>{this.props.payment}</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div className={`${styles.deliveryInfo} ${styles.boxCommonCss}`}>
                    <h2>配送信息</h2>
                    <div>
                        <h4>送达时间</h4>
                        <p>{this.props.deliveryTime}</p>
                    </div>
                    <div>
                        <h4>收货地址</h4>
                        <p>{this.props.address}</p>
                    </div>
                    <div>
                        <h4>配送方式</h4>
                        <p>{this.props.deliveryMethod}</p>
                    </div>
                    <div>
                        <h4>配送骑士</h4>
                        <p>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use href="#icon-Telephone"></use>
                                </svg>  
                                骑手电话
                            </span>
                            <span>
                                {this.props.horseman.name}
                                <svg className="icon" aria-hidden="true">
                                    <use href="#icon-you"></use>
                                </svg> 
                            </span>
                        </p>
                    </div>
                </div>
                <div className={`${styles.orderInfo} ${styles.boxCommonCss}`}>
                    <h2>配送信息</h2>
                    <div>
                        <h4>订单号</h4>
                        <p>
                            <span>{this.props.orderId}</span>
                            <span>复制</span>
                        </p>
                    </div>
                    <div>
                        <h4>支付方式</h4>
                        <p>{this.props.payMethod}</p>
                    </div>
                    <div>
                        <h4>下单时间</h4>
                        <p>{this.props.orderTime}</p>
                    </div>
                </div>
            </div>
        )
    }
}
const mapStateToProps=(state)=>{
    return {
        userName:state.loginReducer.userName,
        isLogin:state.loginReducer.isLogin,
        status:state.orderDetailReducer.orderDetail.orderStatus,
        shopName:state.orderDetailReducer.orderDetail.shop,
        goods:state.orderDetailReducer.orderDetail.goods,
        packExpense:state.orderDetailReducer.orderDetail.packExpense,
        deliveryCost:state.orderDetailReducer.orderDetail.deliveryCost,
        discounts:state.orderDetailReducer.orderDetail.discounts,
        payment:state.orderDetailReducer.orderDetail.payment,
        deliveryTime:state.orderDetailReducer.orderDetail.deliveryTime,
        address:state.orderDetailReducer.orderDetail.shopppingAdress,
        deliveryMethod:state.orderDetailReducer.orderDetail.deliveryMethod,
        horseman:state.orderDetailReducer.orderDetail.horseman,
        orderId:state.orderDetailReducer.orderDetail.orderId,
        payMethod:state.orderDetailReducer.orderDetail.payMethod,
        orderTime:state.orderDetailReducer.orderDetail.orderTime,
    }
}
export default connect(mapStateToProps,null)(withRouter(OrderDetailPage))